<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";

const options = ref([
  {
    value: "1",
    label: "1",
    children: [
      {
        value: "1-1",
        label: "1-1",
      },
    ],
  },
  {
    value: "2",
    label: "2",
    children: [
      {
        value: "2-1",
        label: "2-1",
      },
    ],
  },
]);
</script>

<template>
  <div class="video-sign">
    <div class="label-title">序列标注信息</div>
    <div class="item textarea-item">
      <div class="type-title">文本框组件标题</div>
      <a-textarea allow-clear />
    </div>
    <div class="item radio-item">
      <div class="type-title">单选框组件标题</div>
      <a-radio-group>
        <a-radio value="是">是</a-radio>
        <a-radio value="否">否</a-radio>
      </a-radio-group>
    </div>
    <div class="item checkbox-item">
      <div class="type-title">复选框组件标题</div>
      <a-checkbox-group>
        <a-checkbox value="1">血管狭窄</a-checkbox>
        <a-checkbox value="2">支架</a-checkbox>
        <a-checkbox value="3">心肌桥</a-checkbox>
        <a-checkbox value="4">正常血管</a-checkbox>
      </a-checkbox-group>
    </div>
    <div class="item select-item">
      <div class="type-title">下拉框组件标题</div>
      <a-select :style="{ width: '276px' }" placeholder="请选择">
        <a-option>1</a-option>
        <a-option>2</a-option>
        <a-option>3</a-option>
      </a-select>
    </div>

    <div class="item cascader-item">
      <div class="type-title">二级下拉框组件标题</div>
      <a-cascader
        :options="options"
        :style="{ width: '276px' }"
        placeholder="请选择"
      />
    </div>
  </div>
</template>


<style lang="less">
.video-sign {
  width: 300px;
  height: calc(100vh - 108px);
  background-color: #18252f;
  position: relative;
  padding: 10px 12px;
  .label-title {
    color: #fff;
    line-height: 18px;
  }
  .item {
    padding: 16px 0;
    border-top: 1px solid #000;
    .type-title {
      color: #fff;
      line-height: 18px;
      margin-bottom: 12px;
    }
    .arco-textarea-wrapper {
      background-color: transparent;
    }
    .arco-textarea {
      height: 64px;
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-radius: 4px;
      background-color: transparent;
    }
		&.textarea-item{
			border: none;
			padding-top: 10px;
		}
    &.radio-item {
      .arco-radio-group {
        width: 100%;
        .arco-radio {
          width: 50%;
          margin-right: 0;
        }
      }
      .arco-radio-label {
        color: #fff;
      }
    }
    &.checkbox-item {
      .arco-checkbox-group {
        width: 100%;
        .arco-checkbox {
          width: 50%;
          margin-right: 0;
          margin-bottom: 10px;
        }
      }
      .arco-checkbox-label {
        color: #fff;
      }
    }
    &.select-item {
      .arco-select {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: 4px;
        .arco-select-view-icon {
          color: #fff;
        }
        .arco-select-view-value {
          color: #fff;
        }
      }
    }
    &.cascader-item {
      .arco-select-view {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: 4px;
				.arco-select-view-icon {
          color: #fff;
        }
        .arco-select-view-value {
          color: #fff;
        }
      }
    }
  }
}
</style>
